<template>
  <div class="top">
    <input type="checkbox" v-model="isAllChecked">全选
  </div>
</template>

<script>

export default{
    name:"CartHeader",
    props:["list"],

    //计算属性---全选按钮
    computed:{

      //判断 item的按钮是否全都选中来控制全选按钮
      //已选的数量==数组的长度

      //list的长度
      total(){
        return this.list.length;
      },

      //已选商品的数量
      selectTotal(){
        //数组进行累计叠加，判断每个item的select选择是否为真，为真就加1，初始值为0
        return this.list.reduce((prev,item)=>(prev+=item.select? 1:0),0)
      },

      //是否全选,页面双向绑定选择状态（不理解这里）
      isAllChecked:{
        
        get(){
          //判断长度和已选商品数量是否相等 返回布尔值给全选按钮，为true就是全选
          return this.total === this.selectTotal;
        },

        //当全选按钮点击后，传入点击后的状态值，
        set(value){
          this.$emit("changeAll",value)
        }
      }



    }
}

</script>

<style>
.top {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: pink;
}

.top > input {
  width: 20px;
  height: 20px;
  margin: 0 20px;
}
</style>
